<template>
	<view class="container">
		<!-- 多个纸片风格按钮 -->
		<view v-for="(btn, index) in buttons" :key="index" class="paper-btn"
			:class="{'paper-btn-click': activeIndex === index}" @click="handleClick(index)"
			@animationend="activeIndex = null">
			<text class="btn-text">{{ btn.text }}</text>
			<view class="color-decoration" :style="{background: btn.color}"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeIndex: null,
				buttons: [{
						text: '泰克',
						color: 'linear-gradient(90deg, #ff9a9e 0%, #fad0c4 100%)'
					},
					{
						text: '大禹',
						color: 'linear-gradient(90deg, #a1c4fd 0%, #c2e9fb 100%)'
					},
					{
						text: '睿鑫',
						color: 'linear-gradient(90deg, #84fab0 0%, #8fd3f4 100%)'
					},
					{
						text: '德希',
						color: 'linear-gradient(90deg, #ff758c 0%, #ff7eb3 100%)'
					}
				],
			}
		},
		onLoad(option) {
			
		},
		methods: {
			handleClick(index) {
				this.activeIndex = index;
				uni.redirectTo({
					url: '/pages/currentMeasuringCar/increaseList?toolName=' + '单轨测流车' + '&dopBrand=' + this.buttons[index].text
				});
				// 这里可以添加你的点击逻辑
			}
		}
	}
</script>

<style>
	/* 容器样式 */
	.container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 100vh;
		background-color: #f8f9fa;
		gap: 40rpx;
		/* 按钮间距 */
	}

	/* 纸片按钮基础样式 */
	.paper-btn {
		width: 600rpx;
		height: 180rpx;
		margin-bottom: 20rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		overflow: hidden;
		box-shadow:
			0 4rpx 12rpx rgba(0, 0, 0, 0.08),
			0 8rpx 24rpx rgba(0, 0, 0, 0.05);
		transition: transform 0.1s ease;
	}

	/* 按钮文字 */
	.btn-text {
		font-size: 50rpx;
		font-weight: 500;
		color: #333;
		z-index: 2;
		position: relative;
	}

	/* 彩色装饰条 */
	.color-decoration {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 10rpx;
	}

	/* 点击动画效果 */
	.paper-btn-click {
		animation: clickScale 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	}

	@keyframes clickScale {
		0% {
			transform: scale(1);
		}

		50% {
			transform: scale(0.96);
		}

		100% {
			transform: scale(1);
		}
	}

	/* 按钮悬停效果（仅H5有效） */
	@media (hover: hover) {
		.paper-btn:hover {
			box-shadow:
				0 6rpx 16rpx rgba(0, 0, 0, 0.1),
				0 12rpx 32rpx rgba(0, 0, 0, 0.08);
		}
	}
</style>